<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./Alibabafont/iconfont.css">
   	<meta name="viewport" content="width=device-width, initial-scale=1.0">
   	<link rel="stylesheet" href="./css/shang.css">
   	<!-- <script src="/AlloyFinger-master/alloy_finger.js"></script> -->
   	<style>
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:courier new,courier,monospace}small{font-size:12px}ol,ul{list-style:none}a{text-decoration:none}up{vertical-align:text-top}sub{vertical-align:text-bottom}legend{color:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}
</style>
</head>
<body>
<div id="w"style="margin-top:0px">
 <!--1 互动切换 -->
 <div class="baner">
 	   <img src="./img/goods-4.jpg">
 </div>
<!-- 2商品题目,价值，销量 -->
<div class="pirce">
	  <div class="pirce-text">
	  	  <p>红枣红枣红枣红枣红枣红枣红枣红枣红枣红枣红枣红枣250*2</p>
	  </div>
	  <div class="pirec-pirce">
	  	  <span>￥23.9</span>
	  	  <span>女王节特惠</span>
	  	  <span>淘宝几笔2%</span>
	  </div>
	  <div class="pirce-2">
	  	 <span>价格：￥</span>
	  	 <span>39</span>
	  </div>
	  <div class="addr">
	  	  <p>快递：免运费</p>
	  	  <p>月销量119笔</p>
	  	  <p>广东佛山</p>
	  </div>
	  <div class="taobao-pic">
	       	<img src="./img/toutiao.png">
	  	    <p>发现新东西</p>
	  </div>
	  <!-- 下面第6小行7天没理由 蚂蚁，公益 -->
	  <div class="pirce-six">
	  	  <p>
	  	  <span><img src="./img/goods/right.png"></span>
	  	  <span>7天无理由</span>
	  	  </p>
	  	  <p>
	  	  <span><img src="./img/goods/right.png"></span><span>公益宝贝</span>
	  	  </p>

	  	  <p>
	  	  <span><img src="./img/goods/right.png"></span><span>蚂蚁花吧</span>
	  	  </p>
	  </div>
</div>
<!-- 3评价一下 -->
<div class="pingjia">
	<div class="baobei">
		<p>宝贝评价（1111）</p>
	</div>
	<div class="baobei1">
		<p>划算+（40）</p>
		<p>味道好+（23）</p>
		<p>物流快+（22）</p>
		<p>质量好+（10）</p>
		<p>口感+（45）</p>
		<p>何谈+(66)</p>
	</div>
	<div class="name">
		<div class="names">
			<p>
			<span class="names-pic"><img src="./img/goods/touxiang.jpg"></span>
			<span>卢大富</span>
			<span class="names-pic"><img src="./img/goods/heart.png"><img src="./img/goods/heart.png"></span>
			</p>
		</div>
		<div class="name-p">
			<p>难吃的要死，在也不会来了.祝店家倒闭！！！！！</p>
		</div>
		<div class="look">
		     <div class="look1">
		     	<p>查看全部评价</p>
		     </div>
	    </div>
	</div>
	
</div>
<!--4 商店名字 商店名字商店名字-->
<div class="shop-name">
	  <div class="shop-name1">
	  	  <div class="shop-left">
	  	  	<img src="./img/goods/maijia.jpg">
	  	  </div>
	  	  <div class="shop-right">
	  	  	 <p>水果店 水果直销</p>
	  	  	 <span>
	  	  	    <img src="./img/goods/huangguan.png">
	  	  	    <img src="./img/goods/huangguan.png">
	  	  	    <img src="./img/goods/huangguan.png">
	  	  	 </span>
	  	  </div>
	  </div>
	  <div class="shop-name1">
	  	<div class="name1">
	  		<p>29</p>
	  		<h3>全部宝贝</h3>
	  	</div>
	  	<div class="name1">
	  		<p>1</p>
	  		<h3>伤心宝贝</h3>
	  	</div>
	  	<div class="name1">
	  		<p>2.9亿</p>
	  		<h3>关注人数</h3>
	  	</div>
	  </div>
	  <div class="shop-name2">
	  	  <p>查看匪类</p>
	  	  <p>进去看看</p>
	  </div>
</div>
<!-- 5图文详情3个选项 -->
<div class="text">
	<li>图文详情</li>
	<li>产品数据</li>
	<li>店铺推荐</li>
</div>
<!-- 6 都是图片啊 -->
<div class="des">
	<img src="./img/goods/des0.webp">
	<img src="./img/goods/des1.webp">
	<img src="./img/goods/des2.webp">
	<img src="./img/goods/des3.webp">
	<img src="./img/goods/des6.webp">
</div>
<!-- 7 登录注册 电脑版-->
<div class="login">
	<div class="login1">
		<li>登录</li>
		<li>注册</li>
		<li>意见反馈</li>
		<li>电脑版</li>
	</div>
	<div class="login1">
		<p>&copy;2015 浙B2-20001121 服务中心</p>
	</div>
</div>
</div>
<!--最下面的功能区之导航键-->
 <div class='nav'>
 	  <div class="nav-left">
 	  	  <div class="icon">
 	  	  	<i class="iconfont icon-zhuye"></i>
 	  	  	<p>客服</p>
 	  	  </div>
 	  	  <div class="icon">
 	  	  	<i class="iconfont icon-zhuye"></i>
 	  	  	<p>店铺</p>
 	  	  </div>
 	  	  <div class="icon">
 	  	  	<i class="iconfont icon-zhuye"></i>
 	  	  	<p>收藏</p>
 	  	  </div>
 	  </div>
 	  <div class="nav-right">
 	  	<div class="shop-car">
 	  		<p>加入购物车</p>
 	  	</div>
 	  	<div class="must-buy">
 	  		<p>立即购买</p>
 	  	</div>
 	  </div>
 </div>
</div>
 <script src="./js/js-2.js"></script>
 <script src="./zepto/src/zepto.js"></script>
 <script src="./zepto/src/event.js"></script>
 <script src="./zepto/src/fx.js"></script>
 <script src="./zepto/src/touch.js"></script>
<script>
	document.getElementsByTagName('body')[0].addEventListener('touchmove',function(e){
    e.preventDefault();
},false);

 var startY = 0,
     endY = 0,
     dis= 0,
     mt = 0;                              
  var ba = document.getElementsByTagName('body')[0];
 var view = document.getElementById('w');
 ba.addEventListener('touchstart', function(e) {
    startY = e.changedTouches[0].pageY;
 }, false);
 ba.addEventListener('touchmove', function(e) {
    endY = e.changedTouches[0].pageY;
    dis = endY - startY;
    mt = parseInt(view.style.marginTop);
       // if (mt >= 140) {不要if也很好
       //    return;
       // };
    view.style.marginTop = mt + dis + 'px';
    startY = endY;
 },false);
 ba.addEventListener('touchend', function(e) {
    if (mt >= 0) {
        var step = mt / 150;
        var clock = setInterval(function() {
            mt = mt - step;
            if (mt <= 0) {
                view.style.marginTop = 0 + 'px';
                clearInterval(clock);
            } else {
                view.style.marginTop = mt + 'px';
            }
        }, 5)
    }
 }, false)
</script>
</body>
</html>